<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <script>
        /**
         * 加载任务列表
         * 从localStorage中获取任务列表数据，并添加到页面上的任务列表中
         */
        function loadTasks() {
            const taskList = document.getElementById('taskList');
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.textContent = task;
                taskList.appendChild(li);
            });
        }

        /**
         * 添加任务
         * 获取输入框中的任务描述，将其添加到任务列表中，并保存到localStorage中
         */
        function addTask() {
            const taskInput = document.getElementById('newTask');
            const taskText = taskInput.value.trim();
            if (taskText !== '') {
                const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                tasks.push(taskText);
                localStorage.setItem('tasks', JSON.stringify(tasks));

               // 创建一个新的li元素
                const li = document.createElement('li');

                // 设置li元素的文本内容为任务文本
                li.textContent = taskText;

                // 将新的li元素添加到任务列表中
                document.getElementById('taskList').appendChild(li);

                taskInput.value = '';
            }
        }

        /**
         * 清除所有任务
         * 从localStorage中移除任务列表数据，并清空页面上的任务列表
         */
        function clearTasks() {
            localStorage.removeItem('tasks');
            document.getElementById('taskList').innerHTML = '';
        }

        // 页面加载时自动调用loadTasks函数
        window.onload = loadTasks;
    </script>
</head>
<body>
    <h2>我的任务列表</h2>
    <input type="text" id="newTask" placeholder="输入新任务...">
    <button onclick="addTask()">添加任务</button>
    <button onclick="clearTasks()">清除所有任务</button>
    <ul id="taskList"></ul>
</body>
</html>